<html>
<head>
	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
	<script type="text/javascript" >

	function split(val) {
		
	    return val.split(/,\s*/);
	}
	function extractLast(term) {
	
	    return split(term).pop();
	}
	
	$(document).ready(function() {

	     
	    $( "#showMails").autocomplete({
	        source: function (request, response) {
	            $.getJSON("http://127.0.0.1:8080/escool/findVwUser", {
	                term: extractLast(request.term)
	            }, response);
	        },
	        search: function () {
	            // custom minLength
	            var term = extractLast(this.value);
	            if (term.length < 1) {
	                return false;
	            }
	        },
	        focus: function () {
	            // prevent value inserted on focus
	            return false;
	        },
	        select: function (event, ui) {
	            var terms = split(this.value);
	            // remove the current input
	            terms.pop();
	            // add the selected item
	            terms.push(ui.item.value);
	            // add placeholder to get the comma-and-space at the end
	            terms.push("");
	            this.value = terms.join(", ");
	            return false;
	        }
	    });
	     
	});
  
  
  </script>
</head>
<body>
<div id="images"></div>
<input type="text" id="showMails" name="showMails"/>	
</body>
</html>